<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="src/css/iview.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
</head>

<body>
  <div id="app">
   <div style="padding: 10px 150px">
      <h2>按钮</h2>
      <div style="display: flex">
        <div class="btn-table mr-10">
          <button>详情</button>
        </div>
        <div class="btn-table mr-10">
          <button class="del">异常录入</button>
          <button>附加费录入</button>
        </div>
        <div class="full-btn mr-10">
          <button>选择货物</button>
        </div>
        <div class="full-btn mr-10">
          <button class="ivu-icon ivu-icon-ios-search">查询</button>
        </div>
        <div class="empty-btn mr-10">
          <button>交接确认</button>
          <button class="del">退回</button>
        </div>
        <div class="empty-btn mr-10">
          <button class="ivu-icon ivu-icon-md-add">添加</button>
        </div>
        <button-group class="btn-group">
          <i-button class="close">关闭</i-button>
          <i-button class="save">保存</i-button>
        </button-group>
      </div>
      <br>
      <hr>
      <br>
      <h2>表格</h2>
      <h3>iview表格</h3>
      <h2 class="table-total">您当前共有<span>{{tableDataRecords}}</span>项订单信息</h2>
      <i-table :columns="tableColumn" :data="tableData" ref="refTable" stripe></i-table>
      <div style="margin: 10px;overflow: hidden">
        <div class="tac">
          <Page :total="tableDataRecords" :current.sync="pageIndex" :page-size="5" @on-change="changePage"></Page>
        </div>
      </div>
      <h3>自定义表格</h3>
      <h2 class="table-total">您当前共有<span>{{tableDataRecords}}</span>项订单信息</h2>
      <table class="table-vue">
        <thead>
          <tr>
            <th>序号</th>
            <th>发货人</th>
            <th>业务单号</th>
            <th>发货地址</th>
            <th>联系电话</th>
            <th>制单日期</th>
            <th>件数</th>
            <th>冷链</th>
            <th>专车</th>
            <th>中转</th>
            <th>自提</th>
            <th>高度预警</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData">
            <td>{{ (pageIndex-1)*5+(index+1) }}</td>
            <td>{{ item.sender }}</td>
            <td>{{ item.orderNumber }}</td>
            <td>{{ item.sendAddress }}</td>
            <td>{{ item.tel }}</td>
            <td>{{ item.billingDate }}</td>
            <td>{{ item.pieces }}</td>
            <td>{{ item.coldChain }}</td>
            <td>{{ item.specialCar }}</td>
            <td>{{ item.transfer }}</td>
            <td>{{ item.selfLifting }}</td>
            <td>{{ item.warning }}</td>
            <td>
              <div class="btn-table">
                <button>详情</button>
                <button>发单</button>
                <button class="del">作废</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div style="margin: 10px;overflow: hidden">
        <div class="tac">
          <Page :total="tableDataRecords" :current.sync="pageIndex" :page-size="5" @on-change="changePage"></Page>
        </div>
      </div>
   </div>
  </div>

  <script src="src/js/vue.js"></script>
  <script src="src/js/axios.min.js"></script>
  <script src="src/js/iview.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        tableColumn: [
          {
            type: 'selection',
            width: 40,
            align: 'right'
          },
          {
            // type: 'index',
            title: '序号',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('span', 
                (appLayout.pageIndex -1) * 5 + (params.index + 1)
              )
            }
          },
          {
            title: '发货人',
            key: 'sender',
            align: 'center'
          },
          {
            title: '业务单号',
            key: 'orderNumber',
            width: 130,
            align: 'center'
          },
          {
            title: '发货地址',
            key: 'sendAddress',
            align: 'center'
          },
          {
            title: '联系电话',
            key: 'tel',
            width: 100,
            align: 'center'
          },
          {
            title: '制单日期',
            key: 'billingDate',
            width: 90,
            align: 'center'
          },
          {
            title: '件数',
            key: 'pieces',
            width: 80,
            align: 'center'
          },
          {
            title: '冷链',
            key: 'coldChain',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: params.row.coldChain == "是" ? "font-gray" : "font-orange" },
                  params.row.coldChain
                )
              ]);
            }
          },
          {
            title: '专车',
            key: 'specialCar',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: params.row.specialCar == "是" ? "font-gray" : "font-orange" },
                  params.row.specialCar
                )
              ]);
            }
          },
          {
            title: '中转',
            key: 'transfer',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: params.row.transfer == "是" ? "font-gray" : "font-orange" },
                  params.row.transfer
                )
              ]);
            }
          },
          {
            title: '自提',
            key: 'selfLifting',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: params.row.selfLifting == "是" ? "font-gray" : "font-orange" },
                  params.row.selfLifting
                )
              ]);
            }
          },
          {
            title: '高度预警',
            key: 'warning',
            width: 110,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: "font-red" },
                  params.row.warning
                )
              ]);
            }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 150,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  }
                }, '详情'),
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  }
                }, '发单'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () =>{
                      
                    }
                  }
                }, '作废')
              ]);
            }
          }
        ],
        tableData: [],
        tableDataRecords: 0,
        pageIndex: 1
      },
      methods: {
        getTableData() {
          var self=this;
          self.tableData=[];
          axios.get('static/order.json').then(response => {
            //this.tableData = response.data.Datas;
            response.data.Datas.forEach(function(item,i){
              // i初始值为0
              i = (self.pageIndex-1)*5+i;

              if(i<(5*(self.pageIndex))){
                self.tableData.push({    
                  sender: "武汉铭德无双科技有限公司分公司",
                  orderNumber: i,
                  sendAddress: "恒安泰医药集团",
                  tel: "13845228928",
                  billingDate: "2018-09-28",
                  pieces: "987407 件",
                  coldChain: "否",
                  specialCar: "否",
                  transfer: "否",
                  selfLifting: "否",
                  warning: "已逾期！请处理"
                });
              }
            });
            this.tableDataRecords = response.data.TotalRecords;
          })
        },
        changePage(e) {
          this.pageIndex = e;
          this.getTableData();
        },
      },
      mounted() {
        this.getTableData();     
      }
    })
  </script>
</body>

</html>